<!--
 * @Author: LiKun
 * @Date: 2022-01-04 14:58:15
 * @LastEditTime: 2022-01-05 18:44:53
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \am-app\src\views\manager\OrderDetails.vue
 * 别乱动！
-->
<template>
  <div>
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content">
      <van-divider dashed>工单类型:{{ orderInfo.type }}</van-divider>
      <van-divider dashed
        >工单状态:
        <van-tag
          size="medium"
          v-if="orderInfo.status == '待接单'"
          type="danger"
          >{{ orderInfo.status }}</van-tag
        >
        <van-tag
          size="medium"
          v-else-if="orderInfo.status == '进行中'"
          type="primary"
          >{{ orderInfo.status }}</van-tag
        >
        <van-tag size="medium" v-else type="success">{{
          orderInfo.status
        }}</van-tag>
      </van-divider>
      <van-divider dashed>工程名称:{{ orderInfo.engineer_name }}</van-divider>
      <van-divider dashed>设备名称:{{ orderInfo.device_name }}</van-divider>
      <van-divider dashed
        >创建时间:{{ orderInfo.create_time | datefmt }}</van-divider
      >
      <!-- 判断工单理由，如果是空显示暂无，否则显示理由 -->
      <van-divider v-if="orderInfo.bill_why == null" dashed
        >工单原由:暂无</van-divider
      >
      <van-divider v-else dashed>工单原由:{{ orderInfo.bill_why }}</van-divider>
      <!-- 安装，拆机工单无保修图片，判断工单类型是不是维修，如果是显示保修图片 -->
      <van-divider v-if="orderInfo.type == '维修'" dashed
        >报修图片:
        <van-image
          width="120px"
          fit="cover"
          height="120px"
          v-for="(item, index) in orderInfo.begin_photos"
          :key="index"
          :src="item"
          alt="报修图片丢失"
        />
      </van-divider>
      <!-- 确认工单完成 -->
      <van-divider v-if="orderInfo.status == '进行中'" dashed
        >完成图片上传:
        <van-uploader
          multiple
          :fileList="imgList"
          :max-count="3"
          result-type="file"
          :after-read="afterRead"
          :before-delete="afterDelete"
        />
        <!-- {{ imgList }} -->
      </van-divider>
      <!-- 根据订单状态判断是否完成，完成显示完成时间 -->
      <van-divider v-if="orderInfo.status == '已完成'" dashed
        >完成时间:{{ orderInfo.finish_time | datefmt }}</van-divider
      >
      <!-- 根据订单状态判断是否完成，完成显示完成图片 -->
      <van-divider v-if="orderInfo.status == '已完成'" dashed
        >完成图片:
        <van-image
          width="120px"
          fit="cover"
          height="120px"
          v-for="(item, index) in orderInfo.end_photos"
          :key="index"
          :src="item"
          alt="完成图片丢失"
        />
      </van-divider>
      <div style="margin-top: 20px">
        <van-button
          v-if="orderInfo.status == '待接单'"
          type="info"
          @click="toConfirmHandler"
          style="width: 100%"
          >确认接单</van-button
        >
        <van-button
          v-else-if="orderInfo.status == '进行中'"
          type="info"
          @click="toComfirmCompleted"
          style="width: 100%"
          >确认完成</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import { mapState } from "vuex";
import { Dialog, Notify, Toast } from "vant";
import moment from "moment";
import axios from "axios";
export default {
  data() {
    return {
      order_id: null,
      orderInfo: {},
      imgList: [],
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  filters: {
    fmtDate(val) {
      return moment(parseInt(val)).format("YYYY-MM--DD hh:mm:ss");
    },
  },
  methods: {
    // 确认接单
    toConfirmHandler() {
      Dialog.confirm({
        title: "友情提示",
        message: "是否确认接单？",
      }).then(() => {
        get("/workorder/takeOrder", {
          id: this.orderInfo.id,
          account_id: this.info.id,
        }).then((res) => {
          // 提示成功
          Notify({ type: "success", message: "接单成功" });
          // 跳转至我的工单
          this.$router.push({
            path: "/manager/order",
          });
        });
      });
    },
    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          file.status = "success";
          let url = "http://121.199.29.84:8888/group1/" + response.data.data.id;
          this.imgList.push({ url });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
    afterDelete(file) {
      return new Promise((resolve, reject) => {
        // console.log("删除文件的回调,afterDelete");
        this.imgList.splice(this.imgList.indexOf(file), 1);
      }); 
    },
    // 确认完成
    toComfirmCompleted() {
      let imgList = this.imgList;
      if (imgList.length < 3) {
        Toast.fail("必须上传3张图片");
        return false;
      }
      let url = "/workorder/finishOrder";
      let params = {
        id: this.orderInfo.id,
        photo1: imgList[0].url,
        photo2: imgList[1].url,
        photo3: imgList[2].url,
        finish_time: new Date().getTime(),
      };
      get(url, params).then((resp) => {
        Toast.success(resp.message);
        this.$router.go(-1);
      });
    },
  },
  created() {
    this.orderInfo = this.$route.query;
  },
};
</script>
<style scoped>
.content {
  padding: 15px;
}
.images {
  margin: auto;
  height: 120px;
  width: 240px;
}
</style>
